<template>
  <div class="collection">
    <header>
      <h3>标签分类</h3>
    </header>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
    <!-- 查看全部 -->
    <div class="lookAll">
      <span @click="modelVisible = !modelVisible; getTags()">查看全部 >></span>
    </div>
    <ModelDialog class="labelDialog" v-show="modelVisible">
      <template #header>
        选择标签
      </template>
      <template #body>
        <ul class="tags">
          <li v-for=" (item, index) in tagList" :key="index"
            @click="homeArticleStore().setTag(item); modelVisible = !modelVisible"
            :class="{ 'chosen': item == homeArticleStore().tag }">{{ item }}
          </li>
        </ul>
      </template>
      <template #footer>
        <div class="btn" @click="modelVisible = !modelVisible">关闭</div>
      </template>
    </ModelDialog>
  </div>
</template>

<script setup>
import { reqGetAllTags, reqGetTagList } from '@/apis/tag';
import ModelDialog from '@/components/ModelDialog.vue';
import homeArticleStore from '@/stores/modules/homeArticle';
import { GET_USERID } from '@/utils/tokenAndId';
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
let list = ref([])
let tagList = ref([])
let modelVisible = ref(false)

const { userInfo } = defineProps(['userInfo'])
onMounted(() => {
  if (route.path.startsWith('/otherHome')) {
    getTagList({ userId: route.params.id, num: 5 })
  } else {
    getTagList({ userId: GET_USERID(), num: 5 })
  }
})
watch((route), () => {
  if (route.path.startsWith('/otherHome')) {
    getTagList({ userId: route.params.id, num: 5 })
  } else {
    getTagList({ userId: GET_USERID(), num: 5 })
  }
})
const getTagList = async (params) => {
  let res = await reqGetTagList(params)
  if (res.code == 200) {
    list.value = res.data
  } else {
    console.log(res.msg)
  }
}
const getTags = async () => {
  let Id = route.path.startsWith('/otherHome') ? route.params.id : GET_USERID()
  let res = await reqGetAllTags({ userId: Id })
  if (res.code == 200) {
    tagList.value = res.data
  } else {
    console.log(res);
  }
}
</script>

<style lang="scss" scoped>
.collection {
  width: 100%;
  border-width: .05rem .0833rem .5rem .0833rem;
  border-style: solid;
  border-color: rgba(191, 138, 101, 1);
  margin-top: .3333rem;

  header {
    padding: .1667rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .3rem;
  }

  ul {
    li {
      height: .45rem;
      margin: 0 .1667rem;
      border-width: .0333rem .0167rem .0333rem .0167rem;
      border-style: solid;
      border-color: rgba(102, 102, 102, 1);
      font-size: .28rem;
      line-height: .45rem;
      padding: 0 .1667rem;
      background-color: #CABDA1;
    }
  }

  .lookAll {
    cursor: pointer;
    float: right;
    line-height: .5rem;

    span {
      font-size: .25rem;
      color: #fff;
    }
  }
}

.labelDialog {
  .tags {
    height: 4rem;
    overflow: auto;

    //滚动条样式
    &::-webkit-scrollbar {
      width: 0.1rem;
      height: 0.1rem;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 0.1rem;
    }

    &::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      border-radius: 0.1rem;
    }

    li {
      // padding: .05rem;
      cursor: pointer;
      text-align: left;

      &:hover {
        background-color: #e0e0f0;
        color: #000
      }
    }

    .chosen {
      background-color: #9F7450;
      color: #fff
    }
  }

  .btn {
    margin-left: .3333rem;
    padding: .0833rem;
    background-color: #bfb830;
    border-radius: 20%;
    color: #fff;
    cursor: pointer;
  }
}
</style>